<template v-slot="t">
  <el-button type="primary" plain style="float: left" @click="xinzeng"
    >新增招聘职位</el-button
  >
  招聘信息列表

  <el-table
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    :data="tableData"
    style="width: 100%"
  >
    <el-table-column prop="name" label="职位名称" width="auto">
    </el-table-column>
    <el-table-column prop="zhaopinnum" label="招聘人数" width="auto">
    </el-table-column>
    <el-table-column prop="address" label="地址"> </el-table-column>
    <el-table-column v-slot="scope1">
      <el-collapse v-model="activeNames" @change="xianshi(scope1.row.address)">
        <el-collapse-item title="招聘详情" name="1">
          <div>
            <font class="zhiweimingcheng">{{ scope1.row.name }}</font>
            <font class="zhaopinrenshu">招聘{{ scope1.row.zhaopinnum }}人</font
            ><br />
            <font>{{ scope1.row.address }}</font
            >|
            <font v-if="scope1.row.jingyan == 1">无经验</font>
            <font v-else-if="scope1.row.jingyan == 2">1年以下</font>
            <font v-else-if="scope1.row.jingyan == 3">1-3年</font>
            <font v-else-if="scope1.row.jingyan == 4">3-5年</font>
            <font v-else-if="scope1.row.jingyan == 5">5-10年</font>
            <font v-else-if="scope1.row.jingyan == 6">10年以上</font>
            |
            <font v-if="scope1.row.xueli == 1">不限学历</font>
            <font v-else-if="scope1.row.xueli == 2">小学</font>
            <font v-else-if="scope1.row.xueli == 3">初中</font>
            <font v-else-if="scope1.row.xueli == 4">高中/中专</font>
            <font v-else-if="scope1.row.xueli == 5">大专</font>
            <font v-else-if="scope1.row.xueli == 6">本科</font>
            <font v-else-if="scope1.row.xueli == 7">硕士</font>
            <font v-else-if="scope1.row.xueli == 8">博士及以上</font>
            <br />
            <font class="zhiweiyaoqiu">职位要求</font><br />
            <div
              class="zhiweiyaoqiuinfo"
              v-html="scope1.row.desc.replace(/\n/g, '<br/>')"
            ></div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </el-table-column>
    <el-table-column label="操作" v-slot="scope2">
      <el-button
        icon="el-icon-edit-outline"
        style="color: green"
        @click="edit(scope2.row.id)"
        >编辑</el-button
      >
      <el-popconfirm
        title="这是一段内容确定删除吗？"
        @confirm="del(scope2.row.id)"
      >
        <template #reference>
          <el-button icon="el-icon-delete-solid" style="color: red"
            >删除</el-button
          >
        </template>
      </el-popconfirm>
    </el-table-column>
  </el-table>
  <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      v-model:currentPage="currentPage3"
      layout="prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>
<script>
import { ElMessage } from "element-plus";
export default {
  name: "ZhaoPinList",
  props: ["jwttoken"],
  data() {
    return {
      flag: false,
      user: "",
      page: 1,
      loading: true,
      tableData: [],
    };
  },
  methods: {
    del: function (id) {
      let that = this;
      this.$jquery.ajax({
        async: false,
        type: "POST",
        dataType: "json",
        url: this.$baseurl + "delZhaoPin",
        data: {
          id: id,
        },
        beforeSend: function (request) {
          request.setRequestHeader("Authorization", that.jwttoken);
        },
        success: function (rtn) {
          if (rtn.code == -5) {
            that.$emit("loginstate1", -1);
          }
          if (rtn.code == 1) {
            ElMessage({
              showClose: true,
              message: "删除成功",
              type: "success",
            });
            setTimeout(() => {
              window.location.reload();
            }, 2000);
          } else {
            ElMessage({
              showClose: true,
              message: "删除失败",
              type: "error",
            });
          }
        },
      });
    },
    xianshi(date) {
      //   this.user = date.name;
      //   this.flag = true;
      console.log(date);
    },
    edit: function (id) {
      this.$router.push({ path: "/EditZhaopin/"+id});
    },
    xinzeng: function () {
      this.$router.push("/AddZhaoPin");
    },
    getzhaopinlist: function (page) {
      this.loading = true;
      let that = this;
      this.$jquery.ajax({
        async: false,
        type: "GET",
        dataType: "json",
        url: this.$baseurl + "getZhaoPinList/10/" + page,
        beforeSend: function (request) {
          request.setRequestHeader("Authorization", that.jwttoken);
        },
        success: function (rtn) {
          if (rtn.code == -5) {
            that.$emit("loginstate1", -1);
          }
          if (rtn.code == 1) {
            that.tableData = rtn.data.data;
            that.total = rtn.data.count;
            that.loading = false;
          }
        },
      });
    },
    handleCurrentChange: function (page) {
      this.getzhaopinlist(page);
    },
  },
  created: function () {
    this.getzhaopinlist(1);
  },
};
</script>
<style scoped>
.zhiweimingcheng {
  font-family: 微软雅黑;
  font-weight: bold;
  font-size: 18px;
}
.zhaopinrenshu {
  display: block;
  float: right;
}
.zhiweiyaoqiu {
  color: rgb(170, 118, 118);
  font-weight: bold;
  font-size: 15px;
}
</style>
